﻿<?xml version="1.0" encoding="utf-8"?><Articles><Article><ArticlesID>954</ArticlesID><Title>Cải thiện thời gian load trang với CSSmin</Title><Body>&amp;lt;p&amp;gt;Như ch&amp;amp;uacute;ng ta đ&amp;amp;atilde; biết trong ứng dụng web 2.0 th&amp;amp;igrave; CSS lu&amp;amp;ocirc;n đ&amp;amp;oacute;ng vai tr&amp;amp;ograve; chủ đạo, ứng dụng của bạn c&amp;amp;agrave;ng lớn th&amp;amp;igrave; v&amp;amp;agrave; c&amp;amp;agrave;ng nhiều giao diện th&amp;amp;igrave; bạn c&amp;amp;agrave;ng phải d&amp;amp;ugrave;ng đến nhiều CSS dẫn đến dung lượng file CSS của bạn kh&amp;amp;ocirc;ng hề nhỏ khi đ&amp;amp;oacute; thời gian để tải website của bạn sẽ l&amp;amp;acirc;u hơn, để giảm thiểu dung lượng v&amp;amp;agrave; tối ưu h&amp;amp;oacute;a nội dung file CSS ch&amp;amp;uacute;ng ta viết code như sau:&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: csharp;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
public static string CompressCSS(string body)
   {
       body = Regex.Replace(body, &amp;amp;quot;/\\*.+?\\*/&amp;amp;quot;, &amp;amp;quot;&amp;amp;quot;, RegexOptions.Singleline);
       body = body.Replace(&amp;amp;quot;  &amp;amp;quot;, string.Empty);
       body = body.Replace(Environment.NewLine + Environment.NewLine + Environment.NewLine, string.Empty);
       body = body.Replace(Environment.NewLine + Environment.NewLine, Environment.NewLine);
       body = body.Replace(Environment.NewLine, string.Empty);
       body = body.Replace(&amp;amp;quot;\\t&amp;amp;quot;, string.Empty);
       body = body.Replace(&amp;amp;quot; {&amp;amp;quot;, &amp;amp;quot;{&amp;amp;quot;);
       body = body.Replace(&amp;amp;quot; :&amp;amp;quot;, &amp;amp;quot;:&amp;amp;quot;);
       body = body.Replace(&amp;amp;quot;: &amp;amp;quot;, &amp;amp;quot;:&amp;amp;quot;);
       body = body.Replace(&amp;amp;quot;, &amp;amp;quot;, &amp;amp;quot;,&amp;amp;quot;);
       body = body.Replace(&amp;amp;quot;; &amp;amp;quot;, &amp;amp;quot;;&amp;amp;quot;);
       body = body.Replace(&amp;amp;quot;;}&amp;amp;quot;, &amp;amp;quot;}&amp;amp;quot;);
       body = Regex.Replace(body, &amp;amp;quot;/\\*[^\\*]*\\*+([^/\\*]*\\*+)*/&amp;amp;quot;, &amp;amp;quot;$1&amp;amp;quot;);
       body = Regex.Replace(body, &amp;amp;quot;(?&amp;amp;lt;=[&amp;amp;gt;])\\s{2,}(?=[&amp;amp;lt;])|(?&amp;amp;lt;=[&amp;amp;gt;])\\s{2,}(?=&amp;amp;amp;nbsp;)|(?&amp;amp;lt;=&amp;amp;amp;ndsp;)\\s{2,}(?=[&amp;amp;lt;])&amp;amp;quot;, string.Empty);
  
    return body;
}&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Get tất cả file CSS l&amp;amp;ecirc;n&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: csharp;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
public static IList&amp;amp;lt;System.IO.FileInfo&amp;amp;gt; GetFiles(string serverPath, string extention)
   {
       if (!serverPath.StartsWith(&amp;amp;quot;~/&amp;amp;quot;))
       {
           if (serverPath.StartsWith(&amp;amp;quot;/&amp;amp;quot;))
               serverPath = &amp;amp;quot;~&amp;amp;quot; + serverPath;
           else
               serverPath = &amp;amp;quot;~/&amp;amp;quot; + serverPath;
       }
    
       string path = HttpContext.Current.Server.MapPath(serverPath);
    
       if (!path.EndsWith(&amp;amp;quot;/&amp;amp;quot;))
           path = path + &amp;amp;quot;/&amp;amp;quot;;
    
       if (!Directory.Exists(path))
           throw new System.IO.DirectoryNotFoundException();
    
       IList&amp;amp;lt;FileInfo&amp;amp;gt; files = new List&amp;amp;lt;FileInfo&amp;amp;gt;();
    
       string[] fileNames = Directory.GetFiles(path, &amp;amp;quot;*.&amp;amp;quot; + extention, System.IO.SearchOption.AllDirectories);
       foreach (string name in fileNames)
           files.Add(new FileInfo(name));
  
     return files;
}&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Combine lại&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: csharp;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
public static string CombineCSS()
   {
       string allCSS = string.Empty;
    
       foreach (FileInfo fi in Logic.Files.GetFiles(&amp;amp;quot;~/Content/CSS/&amp;amp;quot;, &amp;amp;quot;css&amp;amp;quot;))
       {
           using (StreamReader sr = new StreamReader(fi.FullName))
               allCSS += sr.ReadToEnd();
       }
    
      allCSS = allCSS.Replace(&amp;amp;quot;~/&amp;amp;quot;, Global.BaseURL);
   
      allCSS = Compress(allCSS);
  
      return allCSS;
 }&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Tạo 1 file CombineCSS.ashx&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: csharp;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
public void ProcessRequest(HttpContext context)
{
	context.Response.ContentType = &amp;amp;quot;text/css&amp;amp;quot;;
	context.Response.Write(CombineCSS());
}&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;t&amp;amp;iacute;ch hợp v&amp;amp;agrave;o phần header của website:&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: xhtml;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
&amp;amp;lt;link type=&amp;amp;quot;text/css&amp;amp;quot; href=&amp;amp;quot;/Services/CombineCSS.ashx&amp;amp;quot; rel=&amp;amp;quot;Stylesheet&amp;amp;quot;/&amp;amp;gt;&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Như vậy l&amp;amp;agrave; bạn đ&amp;amp;atilde; giảm thiểu tối đa dung lượng cho file CSS qua đ&amp;amp;oacute; tốc độ load trang của bạn sẽ được cải thiện hơn rất nhiều.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Trước: dung lượng file css l&amp;amp;agrave; 7.9KB v&amp;amp;agrave; thời gian load hết 19ms&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;img width=&amp;quot;596&amp;quot; height=&amp;quot;274&amp;quot; src=&amp;quot;http://dev.meotom.net/Uploads/admin/2010/7/8/ScreenHunter_001.jpg&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Sau khi Combine dung lượng chỉ c&amp;amp;ograve;n 6,7KB thời gian load giảm xuống 18ms&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;img width=&amp;quot;656&amp;quot; height=&amp;quot;270&amp;quot; src=&amp;quot;http://dev.meotom.net/Uploads/admin/2010/7/8/ScreenHunter_002.jpg&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&amp;amp;nbsp;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;View Source&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;img width=&amp;quot;653&amp;quot; height=&amp;quot;340&amp;quot; src=&amp;quot;http://dev.meotom.net/Uploads/admin/2010/7/8/ScreenHunter_003.jpg&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;</Body><CommentEnabled>True</CommentEnabled><ViewCount>0</ViewCount><ReleaseDate>7/8/2010 8:22:25 PM</ReleaseDate><TotalComment>0</TotalComment><IsMedia>False</IsMedia><IsPicture>False</IsPicture><IsVote>True</IsVote><ArticlePassword /><PostVisible>0</PostVisible><ArticlePath>/2010/7/8/Cai-thien-thoi-gian-load-trang-voi-CSSmin-3BA</ArticlePath><Approved>True</Approved><ImagePath /><CategoryId>26</CategoryId><ArrayCatID>26|25</ArrayCatID></Article></Articles>